<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
<!-- 引入 layui.js -->
<!--<script src="//unpkg.com/layui@2.6.8/dist/layui.js">-->
<div class="layuimini-container">
    <form id="app-form" class="layui-form layuimini-form">

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <span>订单编号:&nbsp;&nbsp;{$row.order.order_id} &nbsp;&nbsp;</span>
                <span>下单时间:&nbsp;&nbsp;{$row.order.add_time} &nbsp;&nbsp;</span>
                <span>订单类型:&nbsp;&nbsp;{$row.order.orderType}&nbsp;&nbsp;</span>
            </div>
        </div>
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label"> </label>-->
<!--            <div class="layui-input-block ">-->
<!--                <span>订单状态: &nbsp;&nbsp;{$row['order']['orderStatus'] .'-'. $row['order']['refundStatus']}</span>-->
<!--&lt;!&ndash;                <label class="layui-form-label">订单状态: &nbsp;&nbsp;{$row['order']['orderStatus'] .'-'. $row['order']['refundStatus']}</label>&ndash;&gt;-->
<!--            </div>-->
<!--        </div>-->
        <div class="ul-padding-md">
            <ul class="layui-timeline ul-timeline-rowstyle">
                <label class="layui-form-label"></label>
                <span>订单状态: &nbsp;&nbsp;{$row['order']['orderStatus'] .'-'. $row['order']['refundStatus']}</span>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        <h3 class="layui-timeline-title ">提交订单</h3>
                        <p>{$row['order']['add_time']}
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        {if $row['order']['payTime']}
                        <h3 class="layui-timeline-title">买家已付款</h3>
                        {else}
                        <h3 class="layui-timeline-title"><font color="#c5c5c7">买家已付款</font></h3>
                        {/if}
                        <p>{$row['order']['payTime']}</p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        {if $row['order']['deliveryTime']}
                        <h3 class="layui-timeline-title">卖家已发货</h3>
                        {else}
                        <h3 class="layui-timeline-title"><font color="#c5c5c7">卖家已发货</font></h3>
                        {/if}
                        <p>{$row['order']['deliveryTime']}
                        </p>
                    </div>
                </li>
                <li class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis"></i>
                    <div class="layui-timeline-content layui-text">
                        {if $row['order']['takeDeliveryTime']}
                        <h3 class="layui-timeline-title">买家已收货</h3>
                        {else}
                        <h3 class="layui-timeline-title"><font color="#c5c5c7">买家已收货</font></h3>
                        {/if}
                        <p>{$row['order']['takeDeliveryTime']}
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <span class="box-bold">发货信息</span><br/>
                    <span>发货方式:&nbsp;&nbsp;快递</span><br/>
                    <span>发货时间:&nbsp;&nbsp;{$row['order']['deliveryTime']}</span><br/>
                    <span>快递公司:&nbsp;&nbsp;{$row['order']['delivery_name']}</span><br/>
                    <span>运单号:&nbsp;&nbsp;{$row['order']['delivery_id']}</span><br/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline layui-layout-body" style="width: 550px;">
                    <span class="box-bold">物流状态:&nbsp;&nbsp;<font color="red">{$row['expressStatu']}</font></span><br/>
                    <span class="box-bold">物流公司:&nbsp;&nbsp;<font color="red">{$row['order']['delivery_name']}</font></span><br/>
                    <span class="box-bold">物流单号:&nbsp;&nbsp;<font color="red">{$row['order']['delivery_id']}</font></span><br/><br/>
                    {foreach $row['express'] as $v}
                    <div>
                        <span><font color="gray">{$v['time']}</font></span><br/>
                        <span>{$v['status']}</span><br/><br/>
                    </div>
                    {/foreach}
<!--                    <div>-->
<!--                        <span>2023</span><br/>-->
<!--                        <span>【长沙市】</span><br/>-->
<!--                    </div>-->
<!--                    <br/>-->
                </div>
            </div>
        </div>
        <div class="layui-form-item" >
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <span class="box-bold">收货人信息</span><br/>
                    <span>收货人:&nbsp;&nbsp;{$row['order']['real_name']}</span><br/>
                    <span>联系电话:&nbsp;&nbsp;{$row['order']['user_phone']}</span><br/>
                    <span>收货地址:&nbsp;&nbsp;{$row['order']['user_address']}</span><br/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline layui-layout-body">
                    <span class="box-bold">配送信息</span><br/>
                    <span>配送方式:&nbsp;&nbsp;普通快递</span><br/>
                    <span>发货时间:&nbsp;&nbsp;{$row['order']['deliveryTime']}</span><br/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline layui-layout-body">
                    <span class="box-bold">付款信息</span><br/>
                    <span>实付金额:&nbsp;&nbsp;{$row['order']['pay_price']}元</span><br/>
                    <span>支付方式:&nbsp;&nbsp;{$row['order']['payType']}</span><br/>
                    <span>付款时间:&nbsp;&nbsp;{$row['order']['payTime']}</span><br/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline layui-layout-body">
                    <span class="box-bold">买家信息</span><br/>
                    <span>买家昵称:&nbsp;&nbsp;{$row['order']['buyer']['nickname']}-{$row['order']['buyer']['real_name']}</span><br/>
                    <span>买家电话:&nbsp;&nbsp;{$row['order']['buyer']['phone']}</span><br/>
                    <span>买家留言:&nbsp;&nbsp;{$row['order']['mark']}</span><br/>
                </div>
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>商品名称</th>
                        <th>所属货仓</th>
                        <th>单价</th>
                        <th>数量</th>
                        <th>优惠金额</th>
                        <th>总价</th>
                    </tr>
                    </thead>
                    <tbody>
                        {foreach $row['order']['goods'] as $vp}
                        <tr>
                        <td><img src="{$vp.products.img}" height="50%" width="50%">{$vp.products.store_name}</td>
                        <td>{$vp.products.hcname}</td>
                        <td>{$vp.products.price}</td>
                        <td>{$vp.products.cart_num}</td>
                        <td>{$vp.products.discount}</td>
                        <td>{$vp.products.true_sum_price}</td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block box">
                <span>商品总价:&nbsp;&nbsp;&nbsp;&nbsp;{$row['trueSumPrice']}</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block box">
                <span class="box-bold">应付金额:&nbsp;&nbsp;&nbsp;&nbsp;{$row['trueSumPrice']}</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <span class="box-bold">订单日志</span><br/><br/>
                <span class="box-color">
                    {foreach $row['order']['statusListLog'] as $vl}
                        <span>{$vl['change_time']} &nbsp;&nbsp;{$vl['change_message']}</span><br/>
                    {/foreach}
                </span>
            </div>
        </div>
    </form>
</div>
<style>
    .box-bold{
        font-weight:bold;
    }
    .box-color{
        color: #1e9fff;
    }
    .layui-text h1, .layui-text h2, .layui-text h3 {
        color: #1e9fff;
    }
    .layui-text{
        color: #1e9fff;
    }
    .box{
        text-align: right;
    }
    .marginLeft{
        margin-left: 50px;
    }

    .ul-timeline-rowstyle {
        display   : flex;
        flex-wrap : nowrap;
        overflow-x: auto;
        width     : 100%;
    }

    .ul-timeline-rowstyle .layui-timeline-item {
        /*margin-right: 15px;*/
        /*min-width   : 300px;*/
        margin-left: 50px;
        min-width   : 130px;
    }

    .ul-timeline-rowstyle .layui-timeline-item:last-child::before {
        display: block;
    }
    /*添加垂直滚动条*/
    .layui-layout-body {
        height: 100px;
        overflow-y: auto;
    }
</style>
